<?
$this->addCSSArray(array('colorpicker.css', 'configurator.css'));
//$this->addJSArray(array('colorpicker.js', 'eye.js', 'utils.js', 'layout.js?ver=1.0.2'));
$this->addJSArray(array('colorpicker.js'));
$this->includeHeader();
?>
<script>
	var inf = {
		e_id:null,
		id: null,
		width: null,
		height: null
	};
</script>
<!-- steps -->
<div id="steps">
	<ul>
		<li id="s1" class="active"><span><strong>Шаг 1, выбор информера</strong></span></li>
		<li id="s2"><span><strong>Шаг 2, настройка параметров</strong></span></li>
		<li id="s3"><span><strong>Шаг 3, код информера</strong></span></li>
	</ul>
</div>
<script>
	$(document).ready(function() {
		$("#s1").click(function() {
			$("#step_3").hide();
			$("#s3").removeClass("active");
			$("#step_2").hide();
			$("#s2").removeClass("active");
			$("#step_1").show();
			$(".settings").hide();
			$(".demo").hide();
			$("#sel_inf").val("");
		});
		$("#s2").click(function() {
			$("#step_3").hide();
			$("#s3").removeClass("active");
			$("#step_2").show();
		});
	});
</script>
<!-- // -->
<!-- step_1 -->
<div id="step_1" class="step" >
	<div class="inf_block">
		<div id="inf_1">
			<table class="inf_1">
			<tr><td colspan="3"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td></tr>
			<tr valign="top">
				<td width="55" style="padding-right:5px"><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td>
				<td width="75" style="padding-right:5px"><span class="TValue">+18 <span class="Cels">°C</span></span></td>
				<td>
					<div class="weather"><span class="Value">2</span><span class="Unit"> м/с</span></div>
					<div class="weather"><span class="Value">745</span><span class="Unit"> мм рт.ст.</span></div>
					<div class="weather"><span class="Value">80</span><span class="Unit"> % влажн.</span></div>
				</td>
			</tr>
			<tr><td colspan="3"><span class="Opis">Ясно, без осадков</span></td></tr>
			<tr><td colspan="3"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
			</table>
		</div>
	</div>
	<div class="inf_block">
		<div id="inf_2">
			<table class="inf_2" width="100%">
			<tr><td valign="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td><td><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td valign="center"><span class="TValue">+18 °C</span></td></tr>
			<tr><td colspan="3" align="center"><span class="Opis">Ясно, без осадков</span></td></tr>
			</table>
			<table class="inf_2" width="100%">
			<tr><td width="25%">Ночь</td><td width="25%">Утро</td><td width="25%">День</td><td width="25%">Вечер</td></tr>
			<tr><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td></tr>
			<tr><td>+10</td><td>+15</td><td>+25</td><td>+17</td></tr>
			<tr><td>1 м/c</td><td>1 м/с</td><td>3 м/с</td><td>1 м/с</td></tr>
			<tr><td colspan="4"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
			</table>
		</div>
	</div>
	<div class="inf_block">
		<div id="inf_3">
			<table class="inf_3">
			<tr><td align="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td></tr>
			<tr><td align="center"><span class="TValue">+18 °C</span></td></tr>
			<tr><td  align="center">
				<span class="Opis">Ясно, без осадков</span><br />
				<span class="Value">2</span><span class="Unit"> м/с</span><br />
				<span class="Value">745</span><span class="Unit"> мм рт.ст.</span><br />
				<span class="Value">80</span><span class="Unit"> % влажн.</span>
			</td></tr>
			<tr><td><a href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a></td></tr>
			</table>
		</div>
	</div>
	<div class="inf_block">
		<div id="inf_4">
			<table class="inf_4" width="100%">
			<tr><td valign="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td><td><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td valign="center"><span class="TValue">+18 °C</span></td></tr>
			<tr><td colspan="3" align="center">
				<span class="Opis">Ясно, без осадков</span><br />
				<span class="Value">2</span><span class="Unit"> м/с</span>
				<span class="Value">745</span><span class="Unit"> мм рт.ст.</span>
				<span class="Value">80</span><span class="Unit"> % влажн.</span>
			</td></tr>
			<tr><td colspan="3"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
			</table>
		</div>
	</div>
	<div class="inf_block">
		<div id="inf_5">
			<table class="inf_5" width="100%">
			<tr><td colspan="2" align="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td></tr>
			<tr><td align="right"><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td align="left"><span class="TValue">+18 °C</span></td></tr>
			<tr><td colspan="2" align="center">
				<span class="Opis">Ясно, без осадков</span><br />
				<span class="Value">2</span><span class="Unit"> м/с</span>
				<span class="Value">745</span><span class="Unit"> мм рт.ст.</span>
				<span class="Value">80</span><span class="Unit"> % влажн.</span>
			</td></tr>
			<tr><td colspan="2"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
			</table>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		var tmpArray = ["city", "t", "wet", "p", "s_wind", "opis", "icons"];
		for (var key in tmpArray) {
			var param = tmpArray[key];
			$("#"+param+"_check").change(function() {
				if (this.checked) {
					$("#"+this.name+"_setting").show();
					$("."+this.name+"_block").show();
				} else {
					$("#"+this.name+"_setting").hide();
					$("."+this.name+"_block").hide();
				}
			});
		}
		tmpArray = null;
		$(".step:first").show();
		$("div.inf_block").click(function() {
			inf.id = "#"+this.children[0].id;
			inf.e_id = this.children[0].id;
			$("#sel_inf").val(inf.id);
			// отображение демки
			$(".demo").hide();
			$(inf.id+"_demo").show();
			$("#step_1").hide();
			$("#step_2").show();
			$("#s2").addClass("active");
			// размеры информера
			inf.width = $(inf.id+"_d").width();
			inf.height = $(inf.id+"_d").height();
			$("#width").val(inf.width);
			$("#height").val(inf.height);
			$("#inf_sizes").html(inf.width+"x"+inf.height);
			// Значения по default
			$("#mid_border_type")[0].value="solid";
			$("#top_border_type")[0].value="solid";
			$("#border_type")[0].value="solid";
			$(inf.id+"_d").css({backgroundColor: "#fff", border:"0"});
			$("#border").val("#000");
			$('#border_sel div').css('backgroundColor', '#000');
			$("#background").val("#fff");
			$('#background_sel div').css('backgroundColor', '#fff');
			$(inf.id+"_d .top_block").css({backgroundColor: "transparent", borderBottom:"0"});
			$("#top_back").val("transparent");
			$('#top_sel div').css('backgroundColor', '#fff');
			$("#top_border").val("#000");
			$('#top_border_sel div').css('backgroundColor', '#000');
			$(inf.id+"_d .mid_block").css({backgroundColor: "transparent"});
			$("#mid_back").val("transparent");
			$('#mid_sel div').css('backgroundColor', '#fff');
			$(inf.id+"_d .mid_border").css({borderBottom:"0"});
			$("#mid_border").val("#000");
			$('#mid_border_sel div').css('backgroundColor', '#000');
			$(inf.id+"_d .bot_block").css({backgroundColor: "transparent"});
			$("#bot_back").val("transparent");
			$('#bot_sel div').css('backgroundColor', '#fff');
			$(inf.id+"_d .TValue").css({color: "#434343"});
			$("#t_color").val("#434343");
			$('#t_color_sel div').css('backgroundColor', '#434343');
			$(inf.id+"_d .Value").css({color: "#069"});
			$("#val_color").val("#069");
			$('#val_color_sel div').css('backgroundColor', '#069');
			$(inf.id+"_d .Opis").css({color: "#979797"});
			$("#opis_color").val("#979797");
			$('#opis_color_sel div').css('backgroundColor', '#979797');
			$(inf.id+"_d .Unit").css({color: "#979797"});
			$("#unit_color").val("#979797");
			$('#unit_color_sel div').css('backgroundColor', '#979797');
			$(inf.id+"_d .Text").css({color: "#979797"});
			$("#text_color").val("#979797");
			$('#text_color_sel div').css('backgroundColor', '#979797');
			$(inf.id+"_d .Link").css({color: "#4379F2"});
			$("#a_color").val("#4379F2");
			$('#a_color_sel div').css('backgroundColor', '#4379F2');
			if ($("#border_check")[0].checked) {$("#border_check")[0].click();}
			if ($("#top_border_check")[0].checked) {$("#top_border_check")[0].click();}
			if ($("#mid_border_check")[0].checked) {$("#mid_border_check")[0].click();}
		});
		var resize = {move:false, mX:0, mY:0};
		$("#size_width").mousedown(function(e) {
			resize.move = true;
			resize.mX = e.pageX;
			document.ondragstart = function() { return false }
      document.body.onselectstart = function() { return false }
			$(document).mouseup(function() {
				$(document).unbind("mousemove");
				$(document).unbind("mouseup");
				resize.move = false;
				document.ondragstart = null;
      document.body.onselectstart = null;
			});
			$(document).mousemove(function(e) {
				if (resize.move) {
					inf.width += e.pageX - resize.mX;
					if (inf.width < 50) {inf.width = 50;}
					if (inf.width > 800) {inf.width = 800;}
					$(inf.id+"_d ."+inf.e_id).width(inf.width);
					$("#inf_sizes").html(inf.width+"x"+inf.height);
					$("#width").val(inf.width);
					resize.mX = e.pageX;
				}
			});
		});
		/*$("#size_height").mousedown(function(e) {
			resize.move = true;
			resize.mY = e.pageY;
			document.ondragstart = function() { return false }
      document.body.onselectstart = function() { return false }
			$(document).mouseup(function() {
				$(document).unbind("mousemove");
				$(document).unbind("mouseup");
				resize.move = false;
				document.ondragstart = null;
      document.body.onselectstart = null;
			});
			$(document).mousemove(function(e) {
				if (resize.move) {
					inf.height += e.pageY - resize.mY;
					if (inf.height < 50) {inf.height = 50;}
					if (inf.height > 700) {inf.height = 700;}
					$(inf.id+"_d ."+inf.e_id).height(inf.height);
					$("#inf_sizes").html(inf.width+"x"+inf.height);
					$("#height").val(inf.height);
					resize.mY = e.pageY;
				}
			});
		});*/
	});
</script>
<!-- // -->
<!-- step_2 -->
<div id="step_2" class="step">
	<form id="inf_settings">
	<input type="hidden" id="sel_inf" name="sel_inf" value="" />
	<input type="hidden" id="width" name="width" value="" />
	<input type="hidden" id="height" name="height" value="" />
	<table width="100%">
	<tr><td colspan="5">
		<!-- demo -->
		<div id="inf_demos">
			<table class="inf_block" style="padding:10px 2px 2px 10px">
				<tr><td>
					<div id="inf_1_demo" class="demo">
						<div id="inf_1_d">
							<table class="inf_1">
							<tr class="top_block"><td colspan="3"><a class="Link City city_block" href="/minsk/"><strong>Минск</strong></a></td></tr>
							<tr class="mid_block" valign="top">
								<td style="padding-right:5px" class="icons_block"><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td>
								<td style="padding-right:5px" class="t_block"><span class="TValue">+18<span class="Unit Cels">°C</span></span></td>
								<td>
									<div class="weather s_wind_block"><span class="Value">2</span><span class="Unit"> м/с</span></div>
									<div class="weather p_block"><span class="Value">745</span><span class="Unit"> мм рт.ст.</span></div>
									<div class="weather wet_block"><span class="Value">80</span><span class="Unit"> % влажн.</span></div>
								</td>
							</tr>
							<tr class="mid_block mid_border"><td colspan="3"><span class="Opis opis_block">Ясно, без осадков</span></td></tr>
							<tr class="bot_block"><td colspan="3"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
							</table>
						</div>
					</div>
					<!-- // -->
					<div id="inf_2_demo" class="demo">
						<div id="inf_2_d">
							<table class="inf_2" width="100%">
							<tr class="top_block city_block"><td valign="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td><td align="center"><img class="icons_block" src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td valign="center" align="right"><span class="TValue t_block">+18 °C</span></td></tr>
							<tr><td colspan="3" align="center"><span class="Opis opis_block">Ясно, без осадков</span></td></tr>
							</table>
							<table class="inf_2" width="100%">
							<tr align="center" class="mid_block"><td width="25%"><span class="Text">Ночь</span></td><td width="25%"><span class="Text">Утро</span></td><td width="25%"><span class="Text">День</span></td><td width="25%"><span class="Text">Вечер</span></td></tr>
							<tr align="center" class="mid_block icons_block"><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td><td><img src="/images/icons/s.1.2.0.png" width="30" height="30" alt="Ясно, без осадков" /></td></tr>
							<tr align="center" class="mid_block t_block"><td><span class="TValue">+10</span></td><td><span class="TValue">+15</span></td><td><span class="TValue">+25</span></td><td><span class="TValue">+17</span></td></tr>
							<tr align="center" class="mid_block s_wind_block"><td><span class="Value">1</span><span class="Unit"> м/с</span></td><td><span class="Value">1</span><span class="Unit"> м/с</span></td><td><span class="Value">3</span><span class="Unit"> м/с</span></td><td><span class="Value">1</span><span class="Unit"> м/с</span></td></tr>
							<tr align="center" class="mid_block p_block"><td><span class="Value">745</span></td><td><span class="Value">745</span></td><td><span class="Value">745</span></td><td><span class="Value">745</span></td></tr>
							<tr align="center" class="mid_block mid_border wet_block"><td><span class="Value">75</span><span class="Unit"> %</span></td><td><span class="Value">88</span><span class="Unit"> %</span></td><td><span class="Value">50</span><span class="Unit"> %</span></td><td><span class="Value">70</span><span class="Unit"> %</span></td></tr>
							<tr class="bot_block"><td colspan="4"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
							</table>
						</div>
					</div>
					<!-- // -->
					<div id="inf_3_demo" class="demo">
						<div id="inf_3_d">
							<table class="inf_3">
							<tr class="city_block top_block"><td align="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td></tr>
							<tr class="t_block"><td align="center"><span class="TValue">+18 °C</span></td></tr>
							<tr class="mid_block opis_block"><td align="center"><span class="Opis">Ясно, без осадков</span></td></tr>
							<tr class="mid_block s_wind_block"><td align="center"><span class="Value">2</span><span class="Unit"> м/с</span></td></tr>
							<tr class="mid_block p_block"><td align="center"><span class="Value">745</span><span class="Unit"> мм рт.ст.</span></td></tr>
							<tr class="mid_block mid_border wet_block"><td align="center"><span class="Value">80</span><span class="Unit"> % влажн.</span></td></tr>
							<tr class="bot_block"><td><a href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a></td></tr>
							</table>
						</div>
					</div>
					<!-- // -->
					<div id="inf_4_demo" class="demo">
						<div id="inf_4_d">
							<table class="inf_4" width="100%">
							<tr class="city_block top_block"><td valign="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td><td class="icons_block" align="center"><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td class="t_block" align="right"><span class="TValue">+18 °C</span></td></tr>
							<tr><td colspan="3" align="center" class="mid_block mid_border">
								<span class="Opis opis_block">Ясно, без осадков</span><br />
								<span class="s_wind_block"><span class="Value">2</span><span class="Unit"> м/с</span></span>
								<span class="p_block"><span class="Value">745</span><span class="Unit"> мм рт.ст.</span></span>
								<span class="wet_block"><span class="Value">80</span><span class="Unit"> % влажн.</span></span>
							</td></tr>
							<tr class="bot_block"><td colspan="3"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
							</table>
						</div>
					</div>
					<!-- // -->
					<div id="inf_5_demo" class="demo">
						<div id="inf_5_d">
							<table class="inf_5" width="100%">
							<tr class="city_block top_block"><td colspan="2" align="center"><a class="City Link" href="/minsk/"><strong>Минск</strong></a></td></tr>
							<tr><td align="right" class="icons_block"><img src="/images/icons/s.1.2.0.png"  alt="Ясно, без осадков" /></td><td align="left" class="t_block"><span class="TValue">+18 °C</span></td></tr>
							<tr class="mid_block mid_border"><td colspan="2" align="center">
								<span class="Opis">Ясно, без осадков</span><br />
								<span class="s_wind_block"><span class="Value">2</span><span class="Unit"> м/с</span></span>
								<span class="p_block"><span class="Value">745</span><span class="Unit"> мм рт.ст.</span></span>
								<span class="wet_block"><span class="Value">80</span><span class="Unit"> % влажн.</span></span>
							</td></tr>
							<tr><td colspan="2"><a style="float:left" href="/"><img src="/images/weather_logo.png" width="99" height="20" alt="Weather.by" /></a> <a style="float:right" class="Link" href="/minsk/">Погода</a></td></tr>
							</table>
						</div>
					</div>
					<!-- // -->
				</td>
				<td id="size_width" style="cursor:col-resize" valign="middle"><img src="/system/templates/default/images/sizeble_width.png" /></td></tr>
				<tr><td id="size_height" style="cursor:row-resize" colspan="2" align="center"><img src="/system/templates/default/images/sizeble_height.png" /></td></tr>
				</table>
			<br />
			<strong>Размеры информера</strong>
			<div id="inf_sizes" class="inf_sizes"></div>
		</div>
	</td></tr>
	<tr><td colspan="5"><div class="line"></div></td></tr>
	<tr><td colspan="5">
		<h3>Местоположение</h3>
		<input type="hidden" id="city_id" name="city_id" value="" />
		<input type="text" id="city" style="width:500px" onfocus="if (this.value == 'Населенный пункт') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Населенный пункт';}" value="Населенный пункт" />
		<div id="city_error" style="padding-top:5px;font-size:12px;color:#979797"></div>
		<div id="city_find" style="display:none"></div>
		<script>
			$(document).ready(function() {
				var inUpdate		= false;
				var waitUpdate		= false;
				function Update() {
					if ($("#city").val().length < 1) {
						$("#city_find").hide();
						return false;
					}
					inUpdate		= true;
					waitUpdate		= false;
					$.ajax({
						type: "POST",
						url: "index.php",
						data: {q: "ajax", ajax: "get_cityid", name: $("#city").val()},
						dataType: 'json'
					}).done(function(request) {
						$("#city_find").hide();
						if (request.ajaxRez == "true") {
							$("#city_error").html("");
							if (!request.cities) {$("#city_error").html("Ничего не найдено");$("#city_find").html("");}
							//else if (request.cities.length == 1) {
								//$("#city_id").val(request.cities[0].ID);
								//$("#city_error").html(request.cities[0].NAME);
								//$("#city_find").html('<div id="city_'+request.cities[0].ID+'" class="find_cities">'+request.cities[0].NAME+'</div>');
							 else {
								var html = '';
								for (key in request.cities) {
									var city = request.cities[key];
									html += '<div id="city_'+city.ID+'" class="find_cities">'+city.NAME+'</div>';
								}
								$("#city_find").html(html);
								$("#city_find").show();
								$(document).click(function() {
									$("#city_find").hide();
									$(document).unbind('click');
								});
								$(".find_cities").click(function() {
									$("#city_error").html(this.innerHTML);
									$("#city_find").hide();
									$("#city_id").val(this.id.replace("city_", ""));
									$("#city").val("Населенный пункт");
								});
							}
						} else {$("#city_error").html("Ничего не найдено");}
						inUpdate = false;
						if (waitUpdate) {waitUpdate = false;Update();}
					});
				}
				$("#city").keydown(function (e) {
					if (e.keyCode == 13) {return false;}
					if (this.value.length < 1) {
						$("#city_find").hide();
						return true;
					}
					if (inUpdate) {waitUpdate = true;return true;}
					setTimeout(Update, 100);
					return true;
				});
				$("#city").click(function() {
					if (this.value != "") {
						$(document).click(function() {$("#city_find").hide(); $(document).unbind('click');});
						$("#city_find").show();
					}
					return false;
				});
			});
		</script>
	</td></tr>
	<tr><td colspan="5"><div class="line"></div></td></tr>
	<tr valign="top">
		<td>
			<h3>Элементы информера</h3>
			<div class="setting_block">
				<input type="checkbox" id="city_check" name="city" checked /><strong> Название города</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="t_check" name="t" checked /><strong> Показатель температуры</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="wet_check" name="wet" checked /><strong> Показатель влажности</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="p_check" name="p" checked /><strong> Показатель давления</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="s_wind_check" name="s_wind" checked /><strong> Показатель скорости ветра</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="icons_check" name="icons" checked /><strong> Иконка погоды</strong>
			</div>
			<div class="setting_block">
				<input type="checkbox" id="opis_check" name="opis" checked /><strong> Описание погоды</strong>
			</div>
		</td>
		<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>
		<td>
			<h3>Оформление информера</h3>
			<div class="setting_block">
				<input type="checkbox" id="border_check" name="border_check" /><strong> Граница информера</strong>
				<div id="border_cblock" style="margin-left:20px; display:none">
					<div id="border_sel" class="select"><div style="background-color:#000"></div></div><strong> Цвет границы информера</strong><br />
					<select id="border_type" name="border_type"><option value="solid">Сплошная</option><option value="dotted">Пунктирная</option><option value="dashed">Штриховая</option></select><strong> Тип границы</strong>
					<input type="hidden" id="border" name="border" value="#000" />
				</div>
			</div>
			<div class="setting_block">
				<div id="background_sel" class="select"><div></div></div><strong> Цвет фона информера</strong>
				<input type="hidden" id="background" name="background" value="#fff" />
			</div>
			<div id="top_setting" class="setting_block">
				<div id="top_sel" class="select"><div style="background-color:#fff"></div></div><strong> Цвет фона верхнего блока</strong><br />
				<input type="hidden" id="top_back" name="top_back" value="#fff" />
				<div style="margin-left:10px">
					<input type="checkbox" id="top_border_check" name="top_border_c" /><strong> Нижняя граница</strong>
					<div id="top_border_cblock" style="margin-left:20px;display:none">
						<div id="top_border_sel" class="select"><div style="background-color:#000"></div></div><strong> Цвет границы</strong><br />
						<input type="hidden" id="top_border" name="top_border" value="#000" />
						<select id="top_border_type" name="top_border_type"><option value="solid">Сплошная</option><option value="dotted">Пунктирная</option><option value="dashed">Штриховая</option></select><strong> Тип границы</strong>
					</div>
				</div>
			</div>
			<div id="top_setting" class="setting_block">
				<div id="mid_sel" class="select"><div style="background-color:#fff"></div></div><strong> Цвет фона среднего блока</strong><br />
				<input type="hidden" id="mid_back" name="mid_back" value="#fff" />
				<div style="margin-left:10px">
					<input type="checkbox" id="mid_border_check" name="mid_border_c" /><strong> Нижняя граница</strong>
					<div id="mid_border_cblock" style="margin-left:20px;display:none">
						<div id="mid_border_sel" class="select"><div style="background-color:#000"></div></div><strong> Цвет границы</strong><br />
						<input type="hidden" id="mid_border" name="mid_border" value="#000" />
						<select id="mid_border_type" name="mid_border_type"><option value="solid">Сплошная</option><option value="dotted">Пунктирная</option><option value="dashed">Штриховая</option></select><strong> Тип границы</strong>
					</div>
				</div>
			</div>
			<div class="setting_block">
				<div id="bot_sel" class="select"><div style="background-color:#fff"></div></div><strong> Цвет фона нижнего блока</strong><br />
				<input type="hidden" id="bot_back" name="bot_back" value="#fff" />
			</div>
			<script>
				$(document).ready(function() {
					$("#border_check").change(function() {
						if (this.checked) {
							$("#border_cblock").show();
							$(inf.id+"_d").css({border: "1px solid "+$("#border").val()});
						} else {
							$(inf.id+"_d").css({border: "0"});
							$("#border_cblock").hide();
						}
					});
					$("#border_type").change(function() {
						$(inf.id+"_d").css({borderStyle: this.value});
					});
					$("#top_border_check").change(function() {
						if (this.checked) {
							$("#top_border_cblock").show();
							$(inf.id+"_d .top_block").css({borderBottom: "1px solid "+$("#top_border").val()});
						} else {
							$(inf.id+"_d .top_block").css({borderBottom: "0"});
							$("#top_border_cblock").hide();
						}
					});
					$("#top_border_type").change(function() {
						$(inf.id+"_d .top_block").css({borderBottomStyle: this.value});
					});
					$("#mid_border_check").change(function() {
						if (this.checked) {
							$("#mid_border_cblock").show();
							$(inf.id+"_d .mid_border").css({borderBottom: "1px solid "+$("#mid_border").val()});
						} else {
							$(inf.id+"_d .mid_border").css({borderBottom: "0"});
							$("#mid_border_cblock").hide();
						}
					});
					$("#mid_border_type").change(function() {
						$(inf.id+"_d .mid_border").css({borderBottomStyle: this.value});
					});
				});
			</script>
		</td>
		<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>
		<td>
			<h3>Оформление текста</h3>
			<div id="t_setting" class="setting_block">
				<div id="t_color_sel" class="select"><div style="background-color:#434343"></div></div><strong> Цвет показателя температуры</strong>
				<input type="hidden" id="t_color" name="t_color" />
			</div>
			<div class="setting_block">
				<div id="val_color_sel" class="select"><div style="background-color:#069"></div></div><strong> Цвет других показателей</strong>
				<input type="hidden" id="val_color" name="val_color" />
			</div>
			<div id="Opis_setting" class="setting_block">
				<div id="opis_color_sel" class="select"><div style="background-color:#979797"></div></div><strong> Цвет описания погоды</strong>
				<input type="hidden" id="opis_color" name="opis_color" />
			</div>
			<div class="setting_block">
				<div id="unit_color_sel" class="select"><div style="background-color:#979797"></div></div><strong> Цвет единиц измерения</strong>
				<input type="hidden" id="unit_color" name="unit_color" />
			</div>
			<div class="setting_block">
				<div id="text_color_sel" class="select"><div style="background-color:#979797"></div></div><strong> Цвет текста</strong>
				<input type="hidden" id="text_color" name="text_color" />
			</div>
			<div class="setting_block">
				<div id="a_color_sel" class="select"><div style="background-color:#4379F2"></div></div><strong> Цвет ссылок</strong>
				<input type="hidden" id="a_color" name="a_color" />
			</div>
		</td>
	</tr>
	<tr><td colspan="5"><div class="line"></div></td></tr>
	<tr><td colspan="5" align="center"><input id="next_step" type="button" value="Получить код" style="padding:5px 10px;font-size:14pt" /></td></tr>
	</table>
	<script>
		$(document).ready(function() {
			$("#next_step").click(function() {
				if ($("#city_id").val() == "") {$("#city_error").html("Не выбран город!"); return false;}
				var form = $("#inf_settings")[0];
				var data = {q: "ajax", ajax: "get_informer"};
				for (var iElem = 0; iElem < form.length; ++iElem) {
					var Element =  form[iElem];
					if (Element.value != "") {
						if (Element.type == "checkbox") {data[Element.name] = Element.checked;}
						else {data[Element.name] = Element.value;}
					}
				}
				$.ajax({
					type: "POST",
					url: "index.php",
					data: data,
					dataType: 'json'
				}).done(function(request) {
					if (request.ajaxRez == "true") {
						$("#step_2").hide();
						$("#s3").addClass("active");
						$("#step_3").show();
						$("#inf_code").val(request.code);
					}
				});
			});
			// ---
			$("#border_sel").ColorPicker({
				color: "#000",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d").css({borderColor: "#"+hex});
					$("#border").val("#"+hex);
					$('#border_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// --
			$("#background_sel").ColorPicker({
				color: "#fff",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d ."+inf.e_id).css({backgroundColor: "#"+hex});
					$("#background").val("#"+hex);
					$('#background_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// --
			$("#top_sel").ColorPicker({
				color: "#fff",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .top_block").css({backgroundColor: "#"+hex});
					$("#top_back").val("#"+hex);
					$('#top_sel div').css('backgroundColor', '#' + hex);
				}
			});
			$("#top_border_sel").ColorPicker({
				color: "#000",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .top_block").css({borderBottomColor: "#"+hex});
					$("#top_border").val("#"+hex);
					$('#top_border_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// --
			$("#mid_sel").ColorPicker({
				color: "#fff",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .mid_block").css({backgroundColor: "#"+hex});
					$("#mid_back").val("#"+hex);
					$('#mid_sel div').css('backgroundColor', '#' + hex);
				}
			});
			$("#mid_border_sel").ColorPicker({
				color: "#000",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .mid_border").css({borderBottomColor: "#"+hex});
					$("#mid_border").val("#"+hex);
					$('#mid_border_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#bot_sel").ColorPicker({
				color: "#fff",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .bot_block").css({backgroundColor: "#"+hex});
					$("#bot_back").val("#"+hex);
					$('#bot_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#t_color_sel").ColorPicker({
				color: "#434343",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .TValue").css({color: "#"+hex});
					$("#t_color").val("#"+hex);
					$('#t_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#val_color_sel").ColorPicker({
				color: "#069",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .Value").css({color: "#"+hex});
					$("#val_color").val("#"+hex);
					$('#val_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#opis_color_sel").ColorPicker({
				color: "#979797",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .Opis").css({color: "#"+hex});
					$("#opis_color").val("#"+hex);
					$('#opis_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#unit_color_sel").ColorPicker({
				color: "#979797",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .Unit").css({color: "#"+hex});
					$("#unit_color").val("#"+hex);
					$('#unit_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#text_color_sel").ColorPicker({
				color: "#979797",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .Text").css({color: "#"+hex});
					$("#text_color").val("#"+hex);
					$('#text_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
			// ---
			$("#a_color_sel").ColorPicker({
				color: "#4379F2",
				onShow: function (colpkr) {$(colpkr).fadeIn(500);return false;},
				onHide: function (colpkr) {$(colpkr).fadeOut(500);return false;},
				onChange: function (hsb, hex, rgb) {
					$(inf.id+"_d .Link").css({color: "#"+hex});
					$("#a_color").val("#"+hex);
					$('#a_color_sel div').css('backgroundColor', '#' + hex);
				}
			});
		});
	</script>
</div>
<!-- // -->
<!-- step_3 -->
<div id="step_3" class="step">
	<h3>Код для вставки информера</h3>
	<textarea id="inf_code" rows="10"></textarea>
</div>
<!-- // -->
<?$this->includeFooter();?>